<style>
	.selects{
		display: block;
		width: 100%;
		padding: .375rem .75rem;
		background-color:#fff;
		border: 1px solid #ced4da;
		cursor: pointer;
		outline:none;
	}
</style>
<!--页面主要内容-->
<main class="lyear-layout-content">

	<div class="container-fluid p-t-15">

		<div class="row">

			<div class="col-lg-12">
				<div class="card">

					<div class="card-toolbar d-flex flex-column flex-md-row">
						<div class="toolbar-btn-action">

							<a class="btn btn-primary" href="{:url('admin/product/product')}"><i class="mdi mdi-check m-r-5"></i>返回</a>
							
						</div>
						
					</div>

					<ul class="nav nav-tabs page-tabs pt-2 pl-3 pr-3">
						<li class="nav-item"> <a class="nav-link active" style="cursor: pointer;">商品添加</a> </li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane active">

							<form method="post" name="edit-form" class="edit-form" enctype="multipart/form-data">
								<div class="form-group">
									<label for="">商品昵称</label>
									<input class="form-control" type="text" name="name" placeholder="请输入商品昵称">
								</div>
								
								<div class="form-group">
									<label for="">商品分类</label>
									<select class="selects" name="typeid" lay-verify="required">
									  <option value="" disabled selected>请选择</option>
									  {foreach $Typelist as $item}
									     <option value="{$item.id}">{$item['name']}</option>
									  {/foreach}
									</select>
								</div>

								<div class="form-group">
									<label for="">商品价格</label>
									<input class="form-control" type="number" name="price" placeholder="请输入商品价格">
								</div>
								
								<div class="form-group">
									<label for="">商品库存</label>
									<input class="form-control" type="text" name="stock" placeholder="请输入商品库存">
								</div>
								
								<div class="form-group">
									<label for="">商品状态</label>
									<select class="selects" name="flag" lay-verify="required">
									  <option value="" disabled selected>请选择</option>
									  <option value="1">新品</option>
									  <option value="2">热销</option>
									  <option value="3">推荐</option>
									</select>
								</div>

								<!-- 商品图片 -->
								<div class="form-group">
									<label >商品图片</label>
									<div style="display: flex;">
										<!-- 1 -->
										<div class="input-group" style="display: block;text-align: center;">
											<input type="file" class="form-control" name="thumbs" id="thumbs" hidden="">
											<img id="imgs" class="img" width="200" height="200" src="/static/home/images/upload.png" />
											<div>
												<button class="btn btn-default" type="button"
													onclick="upload()">上传图片</button>
											</div>
										</div>
										<!-- 2 -->
										<div class="input-group" style="display: block;text-align: center;">
											<input type="file" class="form-control" name="thumbss" id="thumbss" hidden="">
											<img id="imgss" class="img" width="200" height="200" src="/static/home/images/upload.png" />
											<div>
												<button class="btn btn-default" type="button"
													onclick="uploadss()">上传图片</button>
											</div>
										</div>
										<!-- 3 -->
										<div class="input-group" style="display: block;text-align: center;">
											<input type="file" class="form-control" name="thumb" id="thumb" hidden="">
											<img id="img" class="img" width="200" height="200" src="/static/home/images/upload.png" />
											<div>
												<button class="btn btn-default" type="button"
													onclick="uploads()">上传图片</button>
											</div>
										</div>
									</div>
								</div>
								
								<div class="form-group">
									<label for="">商品内容</label>
									<textarea name="content" placeholder="请输入商品内容" class="layui-textarea"></textarea>
								</div>
								

								<div class="form-group">
									<button type="submit" class="btn btn-primary m-r-5">确 定</button>
									<!-- <button type="button" class="btn btn-default"
                                        onclick="javascript:history.back(-1);return false;">返 回</button> -->
								</div>
							</form>

						</div>
					</div>

				</div>
			</div>

		</div>

	</div>

</main>
<!--End 页面主要内容-->
<script>
	// 图片预览函数
	function GetObjectURL(file) {
		// createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
		var url = null;

		//判断是否为IE浏览器还是google还是其他浏览器
		if (window.createObjectURL != undefined) {
			url = window.createObjectURL(file)
		} else if (window.URL != undefined) {
			url = window.URL.createObjectURL(file)
		} else if (window.webkitURL != undefined) {
			url = window.webkitURL.createObjectURL(file)
		}

		return url
	}
// 1
	function upload() {
		// 点击拉起上传选择
		$('#thumbs').click()

		$('#thumbs').change(function() {
			let file = $('#thumbs')[0].files[0] ? $('#thumbs')[0].files[0] : {}

			let url = GetObjectURL(file)

			$('#imgs').attr('src', url)

		})

	}
	// 2
	function uploadss() {
		// 点击拉起上传选择
		$('#thumbss').click()
	
		$('#thumbss').change(function() {
			let file = $('#thumbss')[0].files[0] ? $('#thumbss')[0].files[0] : {}
	
			let url = GetObjectURL(file)
	
			$('#imgss').attr('src', url)
	
		})
	
	}
	// 3
	function uploads() {
		// 点击拉起上传选择
		$('#thumb').click()
	
		$('#thumb').change(function() {
			let file = $('#thumb')[0].files[0] ? $('#thumb')[0].files[0] : {}
	
			let url = GetObjectURL(file)
	
			$('#img').attr('src', url)
	
		})
	
	}
</script>
